<template>
  <!-- 外层大容器 - 包含所有并列的小容器 -->
  <div class="page-wrapper min-h-screen bg-gray-50 text-gray-900">
    <!-- 导航栏小容器a -->
    <div class="navbar-container w-full">
      <Navbar />
    </div>

    <!-- 轮播图小容器b - 添加顶部间距避免被导航栏覆盖 -->
    <div class="carousel-container w-full pt-16 sm:pt-24 bg-transparent">
      <Carousel />
    </div>

    <!-- 核心数据展示小容器c -->
    <div class="stats-container w-full py-20 bg-gradient-to-b from-white to-gray-50 relative overflow-hidden">
      <!-- 装饰背景元素 -->
      <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-24 -right-24 w-64 h-64 rounded-full bg-primary/5 blur-3xl"></div>
        <div class="absolute -bottom-24 -left-24 w-64 h-64 rounded-full bg-secondary/5 blur-3xl"></div>
      </div>
      
      <div class="container mx-auto px-6 md:px-12 relative z-10">
        <!-- 核心数据展示 - 极简高级风格 -->
        <div class="text-center mb-16">
          <span class="inline-block text-xs font-medium text-primary tracking-wider mb-2">我们的实力</span>
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3">核心数据</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">用数据说话，我们为客户创造的实际价值</p>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
          <!-- 数据卡片1 -->
          <div class="bg-white rounded-xl sm:rounded-2xl p-6 sm:p-8 text-center shadow-sm hover:shadow-md transition-all duration-300 transform hover:-translate-y-1 border border-gray-100 card-reveal">
            <div class="mx-auto mb-4 flex items-center justify-center w-16 h-16 rounded-full bg-primary/10">
              <i class="fa fa-building-o text-2xl text-primary"></i>
            </div>
            <p class="text-sm text-gray-500 uppercase tracking-wide mb-2">企业客户</p>
            <h3 class="text-4xl font-bold text-gray-900 mb-2 counter">{{ companyInfo.clientsCount }}+</h3>
            <p class="text-xs text-green-600"><i class="fa fa-arrow-up"></i> 12% 年增长率</p>
          </div>
          
          <!-- 数据卡片2 -->
          <div class="bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-md transition-all duration-300 transform hover:-translate-y-1 border border-gray-100 card-reveal">
            <div class="mx-auto mb-4 flex items-center justify-center w-16 h-16 rounded-full bg-secondary/10">
              <i class="fa fa-check-circle text-2xl text-secondary"></i>
            </div>
            <p class="text-sm text-gray-500 uppercase tracking-wide mb-2">成功项目</p>
            <h3 class="text-4xl font-bold text-gray-900 mb-2 counter">{{ companyInfo.projectsCount }}+</h3>
            <p class="text-xs text-green-600"><i class="fa fa-arrow-up"></i> 28% 年增长率</p>
          </div>
          
          <!-- 数据卡片3 -->
          <div class="bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-md transition-all duration-300 transform hover:-translate-y-1 border border-gray-100 card-reveal">
            <div class="mx-auto mb-4 flex items-center justify-center w-16 h-16 rounded-full bg-blue-100">
              <i class="fa fa-users text-2xl text-blue-700"></i>
            </div>
            <p class="text-sm text-gray-500 uppercase tracking-wide mb-2">专业团队</p>
            <h3 class="text-4xl font-bold text-gray-900 mb-2 counter">{{ companyInfo.teamSize }}+</h3>
            <p class="text-xs text-green-600"><i class="fa fa-arrow-up"></i> 15% 团队扩张</p>
          </div>
          
          <!-- 数据卡片4 -->
          <div class="bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-md transition-all duration-300 transform hover:-translate-y-1 border border-gray-100 card-reveal">
            <div class="mx-auto mb-4 flex items-center justify-center w-16 h-16 rounded-full bg-green-100">
              <i class="fa fa-line-chart text-2xl text-green-700"></i>
            </div>
            <p class="text-sm text-gray-500 uppercase tracking-wide mb-2">平均流量提升</p>
            <h3 class="text-4xl font-bold text-gray-900 mb-2 counter">{{ companyInfo.avgTrafficIncrease }}%</h3>
            <p class="text-xs text-green-600"><i class="fa fa-arrow-up"></i> 行业领先水平</p>
          </div>
        </div>
      </div>
    </div>



    <!-- 关于我们小容器d -->
    <div id="about" class="about-container w-full py-24 bg-white relative overflow-hidden">
      <!-- 装饰背景元素 -->
      <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-blue-50 to-transparent"></div>
      <div class="absolute -bottom-32 -right-32 w-96 h-96 rounded-full bg-primary/5 blur-3xl"></div>
      
      <div class="container mx-auto px-6 md:px-12 relative z-10">
        <div class="text-center mb-16">
          <span class="inline-block text-xs font-medium text-primary tracking-wider mb-3">ABOUT US</span>
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">关于我们</h2>
          <div class="w-24 h-1 bg-primary mx-auto rounded-full"></div>
        </div>
        
        <div class="grid md:grid-cols-2 gap-12 lg:gap-20 items-center">
          <!-- 图片展示 -->
          <div class="relative group">
            <div class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-blue-700/20 rounded-2xl blur opacity-70 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
            <img
              src="https://picsum.photos/id/3/800/1000"
              alt="关于山东同风起信息科技"
              class="w-full max-w-[90%] mx-auto h-auto rounded-2xl object-cover relative z-10 shadow-lg transform transition duration-500 group-hover:scale-[1.02]"
              loading="lazy"
            />
            <!-- 悬浮信息卡 -->
            <div class="absolute -bottom-6 -right-6 bg-white rounded-xl p-4 shadow-xl z-20 transform transition-all duration-300 group-hover:translate-x-2 group-hover:-translate-y-2">
              <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
                  <i class="fa fa-trophy text-primary text-xl"></i>
                </div>
                <div>
                  <h4 class="font-semibold text-gray-900">高新技术企业</h4>
                  <p class="text-xs text-gray-500">行业权威认证</p>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 文本内容 -->
          <div class="max-w-xl mx-auto md:mx-0">
            <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-6 leading-tight">
                <span class="whitespace-nowrap text-2xl md:text-4xl">山东同风起信息科技有限公司</span><br>
                <span class="text-gradient">搜索优化领域的专家</span>
            </h3>
            <p class="text-gray-700 mb-6 leading-relaxed">
              山东同风起信息科技有限公司成立于{{ companyInfo.establishedYear }}年，是由一群深耕搜索营销领域多年的专业人士创立的高新技术企业。
              我们专注于为企业提供全方位的 GEO 与 SEO 搜索优化服务，帮助企业在数字化转型中占据搜索高地。
            </p>
            <p class="text-gray-700 mb-8 leading-relaxed">
              凭借对搜索引擎算法的深刻理解和持续的技术创新，我们已为包括互联网、电商、金融、教育、医疗等多个行业的
              {{ companyInfo.clientsCount }}+企业提供了专业服务，帮助他们实现了平均{{ companyInfo.avgTrafficIncrease }}%的搜索流量增长。
            </p>

            <!-- 使命愿景卡片 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-10">
              <!-- 使命卡片 -->
              <div class="bg-gradient-to-br from-white to-gray-50 rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100">
                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                  <i class="fa fa-bullseye text-primary text-xl"></i>
                </div>
                <h4 class="text-xl font-bold mb-3 text-gray-900">使命</h4>
                <p class="text-gray-600">让每个企业都能在数字世界中被精准找到</p>
              </div>
              
              <!-- 愿景卡片 -->
              <div class="bg-gradient-to-br from-white to-gray-50 rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100">
                <div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center mb-4">
                  <i class="fa fa-eye text-secondary text-xl"></i>
                </div>
                <h4 class="text-xl font-bold mb-3 text-gray-900">愿景</h4>
                <p class="text-gray-600">成为全球领先的搜索优化解决方案提供商</p>
              </div>
            </div>

            <a href="#contact" class="inline-block px-8 py-3 bg-primary text-white font-medium rounded-lg transition-all duration-300 hover:bg-primary/95 shadow-md hover:shadow-lg transform hover:-translate-y-1">
              联系我们 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 业务服务小容器e -->
    <div id="services" class="services-container w-full py-24 bg-gradient-to-b from-gray-50 to-white relative overflow-hidden">
      <!-- 装饰背景元素 -->
      <div class="absolute top-1/4 -left-64 w-96 h-96 rounded-full bg-primary/5 blur-3xl"></div>
      <div class="absolute bottom-1/3 -right-64 w-96 h-96 rounded-full bg-secondary/5 blur-3xl"></div>
      
      <div class="container mx-auto px-6 md:px-12 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <span class="inline-block text-xs font-medium text-primary tracking-wider mb-3">OUR SERVICES</span>
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">业务服务</h2>
          <div class="w-24 h-1 bg-primary mx-auto rounded-full mb-8"></div>
          <p class="text-gray-700 text-lg leading-relaxed mb-8">
            我们专注于 GEO 与 SEO 领域，通过深度技术与创新策略，帮助企业在数字世界中脱颖而出。12年行业经验，已服务超过300家国内外企业。
          </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-12" v-if="services.length > 0">
          <!-- 动态渲染服务卡片 -->
          <div v-for="service in services" :key="service.id" class="bg-white rounded-xl sm:rounded-2xl p-6 sm:p-8 shadow-md hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 card-reveal group">
            <div class="w-20 h-20 flex items-center justify-center rounded-full" :class="[service.iconBg, 'mb-8 shadow-sm group-hover:shadow-md transition-all duration-300']">
                <i :class="['fa', service.icon, service.iconColor, 'text-3xl transform group-hover:scale-110 transition-transform duration-300']"></i>
            </div>
            <h3 class="text-2xl font-bold mb-5 text-gray-900">{{ service.title }}</h3>
            <p class="text-gray-700 mb-8 leading-relaxed">{{ service.description }}</p>
            <ul class="space-y-3 mb-8">
              <li v-for="(feature, index) in service.features" :key="index" class="flex items-start">
                <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">
                  <i class="fa fa-check text-green-600 text-xs"></i>
                </div>
                <span class="text-gray-700">{{ feature }}</span>
              </li>
            </ul>
            <!-- 绿色背景结果显示 -->
            <div class="my-2" v-if="service.result">
              <div class="bg-green-50 text-green-800 rounded-lg py-2 px-4 inline-block">
                <span class="text-sm font-medium">{{ service.result }}</span>
              </div>
            </div>
            <!-- 了解更多链接 -->
            <div class="pt-2">
              <a href="#contact" class="inline-flex items-center text-primary font-medium transition-all duration-300 group-hover:translate-x-2">
                了解更多 <i class="fa fa-arrow-right ml-2 text-sm transition-transform duration-300 group-hover:translate-x-1"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="text-center py-12" v-else>
          <div class="inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4">
            <i class="fa fa-cogs text-gray-400 text-2xl"></i>
          </div>
          <p class="text-gray-500 text-lg">暂无服务内容，请稍后再试</p>
        </div>
        </div>
      </div>
    </div>

    <!-- 案例展示小容器f -->
    <div id="cases" class="cases-container w-full py-24 bg-gradient-to-b from-gray-50 to-white mt-8 relative overflow-hidden">
      <!-- 装饰背景元素 -->
      <div class="absolute top-1/4 -left-40 w-96 h-96 rounded-full bg-primary/5 blur-3xl"></div>
      <div class="absolute bottom-1/3 -right-40 w-96 h-96 rounded-full bg-secondary/5 blur-3xl"></div>
      
      <div class="container mx-auto px-6 md:px-12 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <span class="inline-block px-5 py-1.5 rounded-full bg-primary/5 text-primary font-medium text-xs mb-4">
            成功案例
          </span>
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">案例展示</h2>
          <div class="w-24 h-1 bg-primary mx-auto rounded-full mb-6"></div>
          <h3 class="text-xl md:text-2xl font-semibold mb-4 text-gray-800">
            客户的成功，我们的骄傲
          </h3>
          <p class="text-gray-700 text-lg leading-relaxed">
            我们与各行业领先企业合作，通过专业的搜索优化服务，帮助他们实现业务增长与品牌提升
          </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- 案例 1 -->
          <div class="group flex flex-col bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500 transform hover:-translate-y-3">
            <div class="relative aspect-[4/3] overflow-hidden">
              <img
                src="https://picsum.photos/id/20/800/600"
                alt="制造业搜索优化案例"
                class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                loading="lazy"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-end justify-center p-6">
                <a href="#" class="bg-primary hover:bg-primary/90 text-white font-medium px-5 py-2 rounded-full transition-colors duration-300 transform hover:translate-y-[-5px]">
                  查看详情
                </a>
              </div>
            </div>
            <div class="flex-1 flex flex-col p-6">
              <span class="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-3 self-start">制造业</span>
              <h3 class="text-xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors duration-300">重型机械企业 GEO 优化</h3>
              <p class="text-gray-700 mb-4 leading-relaxed flex-grow">
                为山东重工集团提供全面的 GEO 优化策略，帮助其在百度文心一言、阿里通义千问等 AI 搜索结果中占据领先位置，机械产品相关关键词在AI结果中展示率达89%，询盘量提升 156%。
              </p>
              <a href="#" class="inline-flex items-center text-primary font-medium mt-auto transition-all duration-300 group-hover:translate-x-2">
                查看详情 <i class="fa fa-arrow-right ml-2 text-xs transition-transform duration-300 group-hover:translate-x-1"></i>
              </a>
            </div>
          </div>

          <!-- 案例 2 -->
          <div class="group flex flex-col bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500 transform hover:-translate-y-3">
            <div class="relative aspect-[4/3] overflow-hidden">
              <img
                src="https://picsum.photos/id/48/800/600"
                alt="教育行业SEO案例"
                class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                loading="lazy"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-end justify-center p-6">
                <a href="#" class="bg-primary hover:bg-primary/90 text-white font-medium px-5 py-2 rounded-full transition-colors duration-300 transform hover:translate-y-[-5px]">
                  查看详情
                </a>
              </div>
            </div>
            <div class="flex-1 flex flex-col p-6">
              <span class="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-3 self-start">教育行业</span>
              <h3 class="text-xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors duration-300">在线教育平台 SEO 优化</h3>
              <p class="text-gray-700 mb-4 leading-relaxed flex-grow">
                为学而思网校整合 SEO 与内容策略，优化课程内容和网站架构，使核心课程关键词在百度搜索结果首页占比提升至76%，自然流量增长 210%，付费转化率提升35%。
              </p>
              <a href="#" class="inline-flex items-center text-primary font-medium mt-auto transition-all duration-300 group-hover:translate-x-2">
                查看详情 <i class="fa fa-arrow-right ml-2 text-xs transition-transform duration-300 group-hover:translate-x-1"></i>
              </a>
            </div>
          </div>

          <!-- 案例 3 -->
          <div class="group flex flex-col bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500 transform hover:-translate-y-3">
            <div class="relative aspect-[4/3] overflow-hidden">
              <img
                src="https://picsum.photos/id/26/800/600"
                alt="金融行业搜索优化案例"
                class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                loading="lazy"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-end justify-center p-6">
                <a href="#" class="bg-primary hover:bg-primary/90 text-white font-medium px-5 py-2 rounded-full transition-colors duration-300 transform hover:translate-y-[-5px]">
                  查看详情
                </a>
              </div>
            </div>
            <div class="flex-1 flex flex-col p-6">
              <span class="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-3 self-start">金融行业</span>
              <h3 class="text-xl font-bold mb-3 text-gray-900 group-hover:text-primary transition-colors duration-300">金融服务搜索可见性提升</h3>
              <p class="text-gray-700 mb-4 leading-relaxed flex-grow">
                为中国平安提供全方位搜索优化，整合传统SEO与GEO策略，品牌相关关键词搜索可见度提升 89%，在主流AI搜索中的精准回答引用率达63%，转化率提升 47%。
              </p>
              <a href="#" class="inline-flex items-center text-primary font-medium mt-auto transition-all duration-300 group-hover:translate-x-2">
                查看详情 <i class="fa fa-arrow-right ml-2 text-xs transition-transform duration-300 group-hover:translate-x-1"></i>
              </a>
            </div>
          </div>
        </div>

        <!-- 查看更多案例按钮 - 独立容器，确保在案例下方显示 -->
        <div class="text-center mt-16 relative z-10" v-if="!showPartners">
          <button @click="loadMoreCases" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 shadow-md hover:shadow-lg group transform hover:-translate-y-1">
            查看更多案例 <i class="fa fa-arrow-right ml-2 transform group-hover:translate-x-1 transition-transform duration-300"></i>
          </button>
        </div>
        
        <!-- 合作伙伴logo展示区域 - 点击按钮后显示 -->
        <div v-if="showPartners" class="mt-16 py-16 bg-white rounded-2xl shadow-lg animate-fadeIn">
          
          <!-- 标题 -->
          <div class="text-center mb-16">
            <h3 class="text-2xl font-bold text-gray-900 mb-3">值得信赖的合作伙伴</h3>
            <p class="text-gray-600 max-w-2xl mx-auto">我们与众多行业领先企业建立了长期合作关系，共同创造搜索营销的卓越成果</p>
          </div>
          
          <!-- Logo容器 -->
          <div class="container mx-auto px-4">
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
                <div 
                  v-for="(partner, index) in partners" 
                  :key="partner.name"
                  class="h-20 flex items-center justify-center bg-gray-50 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 transform hover:-translate-y-2 group"
                >
                  <img 
                    :src="partner.logo" 
                    :alt="partner.name" 
                    class="max-h-10 transition-all duration-500 transform group-hover:scale-110"
                    loading="lazy"
                  >
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 联系我们小容器g -->
    <div id="contact" class="contact-container w-full py-20 bg-gray-50 mt-8">
      <div class="container mx-auto px-6 md:px-12">
        <div class="max-w-6xl mx-auto relative z-10">
          <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 animate-fadeIn">联系我们</h2>
            <div class="w-24 h-1 bg-primary mx-auto rounded-full mb-6 animate-slideUp"></div>
          </div>
          
          <div class="grid md:grid-cols-2 gap-x-12 gap-y-12 items-start">
            <div class="animate-slideUp animation-delay-200">
              <span class="inline-block px-5 py-1.5 rounded-full bg-primary/5 text-primary font-medium text-xs mb-4">
                联系我们
              </span>
              <h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight text-gray-900">
                让我们携手共创搜索领域新高度
              </h3>
              <p class="text-gray-700 mb-8 text-lg leading-relaxed">
                无论您是想了解更多关于搜索优化的信息，还是需要定制化解决方案，
                我们的专业团队都将为您提供一对一的咨询服务，助您实现业务目标。
              </p>

              <div class="space-y-6">
                <ContactInfo
                  icon="fa-map-marker"
                  title="公司地址"
                  :items="[companyInfo.address]"
                />

                <ContactInfo
                  icon="fa-phone"
                  title="联系电话"
                  :items="[companyInfo.phone, companyInfo.tel]"
                />

                <ContactInfo
                  icon="fa-envelope"
                  title="电子邮箱"
                  :items="[companyInfo.email, companyInfo.salesEmail]"
                />
              </div>
            </div>

            <div class="bg-white rounded-2xl shadow-xl px-6 py-2 transform transition-all duration-500 hover:shadow-2xl animate-slideUp animation-delay-400 relative overflow-hidden group">
              <div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-3xl -mr-10 -mt-10 group-hover:bg-primary/10 transition-colors duration-500"></div>
              
              <h3 class="text-xl font-bold mb-3 flex items-center text-gray-900">
                <i class="fa fa-comments text-primary mr-3"></i>
                发送咨询
              </h3>
              
              <form @submit.prevent="submitContactForm" class="space-y-3 relative z-10">
                <div class="relative group">
                  <label for="name" class="block text-gray-700 font-medium mb-1">
                    姓名 <span class="text-red-500" aria-hidden="true">*</span>
                  </label>
                  <div class="absolute -inset-1 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-xl blur opacity-0 group-hover:opacity-100 transition duration-300"></div>
                  <input 
                    type="text"
                    id="name"
                    v-model="contactForm.name"
                    class="relative w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all shadow-sm hover:border-gray-300"
                    placeholder="请输入您的姓名"
                    required 
                  />
                </div>

                <div class="relative group">
                  <label for="company" class="block text-gray-700 font-medium mb-1">
                    公司名称 <span class="text-red-500" aria-hidden="true">*</span>
                  </label>
                  <div class="absolute -inset-1 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-xl blur opacity-0 group-hover:opacity-100 transition duration-300"></div>
                  <input
                    type="text"
                    id="company"
                    v-model="contactForm.company"
                    class="relative w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all shadow-sm hover:border-gray-300"
                    placeholder="请输入您的公司名称"
                    required
                  />
                </div>

                <div class="relative group">
                  <label for="phone" class="block text-gray-700 font-medium mb-1">
                    电话 <span class="text-red-500" aria-hidden="true">*</span>
                  </label>
                  <div class="absolute -inset-1 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-xl blur opacity-0 group-hover:opacity-100 transition duration-300"></div>
                  <input
                    type="tel"
                    id="phone"
                    v-model="contactForm.phone"
                    class="relative w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all shadow-sm hover:border-gray-300"
                    placeholder="请输入您的电话"
                    required
                    @blur="validatePhone"
                  />
                  <p v-if="phoneError" class="text-red-500 text-sm mt-2">{{ phoneError }}</p>
                </div>

                <div class="relative group">
                  <label for="service" class="block text-gray-700 font-medium mb-1">
                    感兴趣的业务 <span class="text-red-500" aria-hidden="true">*</span>
                  </label>
                  <div class="absolute -inset-1 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-xl blur opacity-0 group-hover:opacity-100 transition duration-300"></div>
                  <select
                    id="service"
                    v-model="contactForm.service"
                    class="relative w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all shadow-sm hover:border-gray-300"
                    placeholder="请选择您感兴趣的业务"
                    required
                  >
                    <option value="" disabled selected>请选择您感兴趣的业务</option>
                    <option v-for="service in services" :key="service.id" :value="service.title">
      {{ service.title }}
    </option>
                  </select>
                </div>

                <div class="relative group">
                  <label for="message" class="block text-gray-700 font-medium mb-1">
                    咨询内容 <span class="text-red-500" aria-hidden="true">*</span>
                  </label>
                  <div class="absolute -inset-1 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-xl blur opacity-0 group-hover:opacity-100 transition duration-300"></div>
                  <textarea 
                    id="message"
                    rows="3"
                    v-model="contactForm.message"
                    class="relative w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all shadow-sm hover:border-gray-300 resize-none"
                    placeholder="请详细描述您的需求或问题"
                    required
                  ></textarea>
                </div>

                <button
                  type="submit"
                  class="w-full bg-gradient-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary text-white font-medium py-4 rounded-xl transition-all duration-500 shadow-lg hover:shadow-xl flex items-center justify-center gap-2 transform hover:-translate-y-1"
                  :disabled="isSubmitting"
                >
                  <span v-if="isSubmitting">
                    <i class="fa fa-spinner fa-spin"></i> 提交中...
                  </span>
                  <span v-else class="inline-flex items-center">
                    提交咨询
                    <i class="fa fa-paper-plane ml-2 transition-transform duration-300 hover:translate-x-1"></i>
                  </span>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚小容器h -->
      <Footer />

    <!-- 成功提交弹窗 -->
    <div v-if="showSuccessModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-100 backdrop-blur-sm animate-fadeIn" style="z-index: 9999;">
      <div class="bg-white p-8 rounded-2xl max-w-md mx-4 shadow-2xl transform transition-all duration-500 animate-scaleIn relative overflow-hidden">
        <!-- 装饰背景 -->
        <div class="absolute top-0 right-0 w-40 h-40 bg-green-50 rounded-full blur-3xl -mr-16 -mt-16"></div>
        
        <div class="text-center relative z-10">
          <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6 transform transition-transform duration-500 hover:scale-110">
            <i class="fa fa-check text-green-500 text-3xl"></i>
          </div>
          <h3 class="text-2xl md:text-3xl font-bold mb-3 text-gray-900">提交成功！</h3>
          <p class="text-gray-700 mb-8 leading-relaxed text-lg">
            感谢您的咨询，我们的专业团队将尽快与您联系。
          </p>
          <button
            @click="showSuccessModal = false"
            class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 group"
          >
            <span class="inline-flex items-center justify-center transition-all duration-300 group-hover:translate-x-[-2px]">
              关闭
              <i class="fa fa-times ml-2 transition-transform duration-300 group-hover:rotate-90"></i>
            </span>
          </button>
        </div>
      </div>
    </div>
</template>

<style>
/* 科技风格动画 */
@keyframes slow-float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

.animate-slow-float {
  animation: slow-float 6s ease-in-out infinite;
}

/* 数据卡片效果 */
.data-card {
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 55, 158, 0.1);
}

.tech-number {
  position: relative;
  overflow: hidden;
}

/* 科技发光文字效果 */
.tech-glow {
  position: relative;
  display: inline-block;
  text-shadow: 0 0 10px rgba(247, 100, 0, 0.7),
               0 0 20px rgba(247, 100, 0, 0.5),
               0 0 30px rgba(247, 100, 0, 0.3);
  animation: glow-pulse 2s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
  from { text-shadow: 0 0 5px rgba(247, 100, 0, 0.7); }
  to { text-shadow: 0 0 20px rgba(247, 100, 0, 0.9), 0 0 30px rgba(247, 100, 0, 0.7); }
}

/* 服务卡片科技风格效果 */
.group-hover-transform {
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.group:hover .card-reveal {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 网格点效果 */
.grid-point {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: #00379E;
  border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(0, 55, 158, 0.7);
  animation: pulse 4s infinite;
}

/* 动画延迟类 */
.animation-delay-200 {
  animation-delay: 0.2s;
}

.animation-delay-400 {
  animation-delay: 0.4s;
}

.animation-delay-600 {
  animation-delay: 0.6s;
}

.animation-delay-800 {
  animation-delay: 0.8s;
}

/* ContactInfo 组件样式优化 */
.contact-info {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.contact-info:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.contact-icon {
  background-color: rgba(247, 100, 0, 0.1);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.contact-info:hover .contact-icon {
  background-color: rgba(247, 100, 0, 0.2);
  transform: scale(1.05);
}

.contact-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 8px;
}

.contact-item {
  color: #4a5568;
  margin-bottom: 4px;
}

.contact-item:last-child {
  margin-bottom: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* 按钮脉冲效果 */
.btn-pulse {
  position: relative;
  overflow: hidden;
}

.btn-pulse::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-pulse:hover::before {
  width: 300px;
  height: 300px;
}
</style>

<script>
import Navbar from '@/components/Navbar.vue'
import Footer from '@/components/Footer.vue'
import SuccessModal from '@/components/SuccessModal.vue'
import ContactInfo from '@/components/ContactInfo.vue'
import Carousel from '@/components/Carousel.vue'

import { COMPANY_INFO, PARTNERS } from '@/config/constants'

export default {
  name: 'Home',
  components: {
    Navbar,
    Footer,
    SuccessModal,
    ContactInfo,
    Carousel
  },
  data() {
    return {
      companyInfo: COMPANY_INFO,
      partners: PARTNERS,
      contactForm: {
        name: '',
        company: '',
        phone: '',
        service: '',
        message: ''
      },
      phoneError: '',
      isSubmitting: false,
      showSuccessModal: false,
      showPartners: false,
      services: []
    }
  },
  async mounted() {
    // 设置页面特定的 meta 标签
    document.title = '山东同风起信息科技有限公司';

    // 更新或创建 meta description
    let metaDescription = document.querySelector('meta[name="description"]');
    if (!metaDescription) {
      metaDescription = document.createElement('meta');
      metaDescription.name = 'description';
      document.head.appendChild(metaDescription);
    }
    metaDescription.setAttribute('content', '山东同风起信息科技专注于GEO与SEO搜索优化，帮助企业提升搜索可见性，实现品牌价值最大化。');

    this.initAnimations();
    this.handleHashRouting();
    
    // 添加测试API连接的全局方法
    window.testApiConnection = this.testApiConnection;
    console.log('可用API测试函数: window.testApiConnection()');
    
    // 获取业务服务数据
    await this.fetchServices();
  },
  watch: {
    showSuccessModal(newVal) {
      if (newVal) {
        // 弹窗显示时，禁止页面滚动
        document.body.style.overflow = 'hidden';
        document.documentElement.style.overflow = 'hidden';
      } else {
        // 弹窗关闭时，恢复页面滚动
        document.body.style.overflow = 'auto';
        document.documentElement.style.overflow = 'auto';
      }
    }
  },
  methods: {
    // 获取业务服务数据
    async fetchServices() {
      try {
        console.log('开始获取业务服务数据...');
        const response = await fetch('/api/services', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          },
          credentials: 'include',
          mode: 'cors'
        });
        
        if (!response.ok) {
          throw new Error(`获取服务数据失败: ${response.status}`);
        }
        
        const data = await response.json();
        console.log('业务服务数据获取成功:', data);
        // 处理features字段，确保它是数组类型
        this.services = data.map(service => {
          let features = [];
          if (Array.isArray(service.features)) {
            features = service.features;
          } else if (typeof service.features === 'string') {
            try {
              features = JSON.parse(service.features);
              if (!Array.isArray(features)) {
                features = [features];
              }
            } catch (e) {
              features = [service.features];
            }
          } else if (service.features) {
            features = [String(service.features)];
          }
          return {
            ...service,
            features
          };
        }).sort((a, b) => (parseInt(a.id) || 0) - (parseInt(b.id) || 0));
        
        console.log('处理并排序后的服务数据:', this.services);
      } catch (error) {
        console.error('获取业务服务数据时出错:', error);
        // 错误时提供默认的mock数据
        this.services = [
          {
            id: 1,
            title: 'GEO 生成式引擎优化',
            icon: 'fa-brain',
            iconColor: 'text-blue-600',
            iconBg: 'bg-gradient-to-br from-blue-50 to-blue-100',
            description: '针对百度文心一言、阿里通义千问等生成式AI引擎的内容优化，提升品牌在AI回答中的展示率和权威性。',
            features: ['AI问答内容优化', '知识图谱构建', '权威来源建设', '多模态内容优化'],
            result: 'AI搜索展示率提升85%',
            order: 1,
            is_active: 1
          },
          {
            id: 2,
            title: 'SEO 搜索引擎优化',
            icon: 'fa-search',
            iconColor: 'text-green-600',
            iconBg: 'bg-gradient-to-br from-green-50 to-green-100',
            description: '全方位的搜索引擎优化策略，提升网站在百度、谷歌等传统搜索引擎中的自然排名。',
            features: ['关键词研究优化', '技术SEO审计', '内容策略制定', '链接建设'],
            result: '有机流量增长200%',
            order: 2,
            is_active: 1
          },
          {
            id: 3,
            title: '搜索营销咨询',
            icon: 'fa-chart-line',
            iconColor: 'text-purple-600',
            iconBg: 'bg-gradient-to-br from-purple-50 to-purple-100',
            description: '专业的搜索营销战略咨询，为企业定制全面的数字化转型和搜索营销策略。',
            features: ['搜索战略规划', '竞争对手分析', 'ROI评估', '团队培训'],
            result: '营销效率提升60%',
            order: 3,
            is_active: 1
          }
        ];
        console.log('使用mock数据替代真实数据');
      }
    },

    // 测试API连接
    async testApiConnection() {
      console.log('开始测试API连接...');
      try {
        // 测试GET请求
        const getResponse = await fetch('/api/contact-forms', {
          method: 'GET',
          credentials: 'include',
          mode: 'cors',
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        console.log('GET请求状态:', getResponse.status);
        const getResult = await getResponse.json();
        console.log('GET请求结果:', getResult);
        
        // 测试POST请求
        const testFormData = {
          name: '测试用户',
          company: '测试公司',
          phone: '13800138000',
          service: 'GEO搜索优化', // 使用配置文件中的服务类型
          message: '这是一个测试消息'
        };
        
        const postResponse = await fetch('/api/contact-forms', {
          method: 'POST',
          credentials: 'include',
          mode: 'cors',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(testFormData)
        });
        
        console.log('POST请求状态:', postResponse.status);
        const postResult = await postResponse.json();
        console.log('POST请求结果:', postResult);
        
        return 'API连接测试成功';
      } catch (error) {
        console.error('API连接测试失败:', error);
        return `API连接测试失败: ${error.message}`;
      }
    },
    initAnimations() {
      // 滚动动画初始化
      const animateOnScroll = () => {
        const elements = document.querySelectorAll('.card-reveal')
        elements.forEach(element => {
          const elementTop = element.getBoundingClientRect().top
          const elementVisible = 150
          if (elementTop < window.innerHeight - elementVisible) {
            element.classList.add('active')
          }
        })
      }
      window.addEventListener('scroll', animateOnScroll)
      animateOnScroll()
    },
    handleHashRouting() {
      // 处理哈希路由
      if (this.$route.hash) {
        setTimeout(() => {
          const element = document.querySelector(this.$route.hash)
          if (element) {
            element.scrollIntoView({ behavior: 'smooth' })
          }
        }, 100)
      }
    },
    loadMoreCases() {
      // 直接显示合作伙伴logo，不设置noMoreCases状态
      this.showPartners = true
    },
    
    validatePhone() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!this.contactForm.phone) {
        this.phoneError = '电话不能为空';
      } else if (!phoneRegex.test(this.contactForm.phone)) {
        this.phoneError = '请输入有效的手机号码';
      } else {
        this.phoneError = '';
      }
    },
    async submitContactForm() {
      // 先验证
      this.validatePhone();

      if (this.phoneError) {
        return;
      }

      this.isSubmitting = true;

      try {
        // 清理数据
        const sanitizedData = this.sanitizeFormData(this.contactForm);

        // 模拟API请求
        await this.submitFormData(sanitizedData);

        // 显示成功弹窗
        this.showSuccessModal = true;

        // 重置表单
        this.contactForm = {
          name: '',
          company: '',
          phone: '',
          message: ''
        };
      } catch (error) {
        console.error('提交失败:', error);
        // 显示更详细的错误信息
        alert(`提交失败: ${error.message}\n请查看浏览器控制台获取更多信息`);
      } finally {
        this.isSubmitting = false;
      }
    },
    sanitizeFormData(data) {
      const sanitized = {};
      
      // 字段名映射关系
      const fieldMappings = {
        'company': 'company_name',
        'service': 'interested_service'
      };
      
      Object.keys(data).forEach(key => {
        // 获取目标字段名，如果有映射则使用映射的字段名，否则使用原字段名
        const targetKey = fieldMappings[key] || key;
        
        // 基本的XSS防护 - 移除危险字符
        sanitized[targetKey] = String(data[key])
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;')
          .replace(/"/g, '&quot;')
          .replace(/'/g, '&#x27;')
          .replace(/\//g, '&#x2F;');
      });
      
      return sanitized;
    },
    // 实际表单提交到数据库的函数
    async submitFormData(data) {
      console.log('开始执行表单提交函数');
      try {
        // 使用绝对路径直接访问后端，避免代理可能的问题
        const apiUrl = '/api/contact-forms';
        console.log('准备发送请求到:', apiUrl);
        console.log('请求数据:', data);
        
        // 在发送请求前检查URL可达性（简单的连接测试）
        console.log('正在验证API端点是否可用...');
        
        // 实际API请求
        console.log('正在发送fetch请求...');
        const response = await fetch(apiUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          },
          body: JSON.stringify(data),
          // 添加credentials选项以允许跨域Cookie
          credentials: 'include',
          // 添加mode以处理跨域
          mode: 'cors'
        });
        
        console.log('收到响应，状态码:', response.status);
        console.log('响应状态文本:', response.statusText);
        console.log('响应头:', Array.from(response.headers.entries()));
        
        // 获取Content-Type以确定响应类型
        const contentType = response.headers.get('content-type');
        console.log('响应Content-Type:', contentType);
        
        if (!response.ok) {
          // 尝试获取错误信息的多种方式
          let errorText = '';
          try {
            if (contentType && contentType.includes('application/json')) {
              const errorData = await response.json();
              errorText = errorData.error || errorData.message || JSON.stringify(errorData);
            } else {
              errorText = await response.text();
            }
          } catch (parseError) {
            console.error('解析错误响应失败:', parseError);
            errorText = '无法解析错误响应';
          }
          
          const errorMessage = `请求失败 (${response.status}): ${errorText}`;
          console.error('响应错误:', errorMessage);
          throw new Error(errorMessage);
        }
        
        console.log('响应正常，开始解析响应...');
        let result;
        
        try {
          // 根据响应类型解析结果
          if (contentType && contentType.includes('application/json')) {
            result = await response.json();
          } else {
            // 非JSON响应，获取原始文本
            const textResponse = await response.text();
            result = { success: true, data: textResponse, isTextResponse: true };
            console.log('收到非JSON响应，内容:', textResponse);
          }
        } catch (jsonError) {
          console.error('解析响应JSON失败:', jsonError);
          // 解析失败时获取原始文本
          const rawText = await response.text();
          console.log('原始响应文本:', rawText);
          throw new Error(`服务器返回的响应格式不正确: ${jsonError.message}`);
        }
        
        console.log('表单提交结果:', result);
        return result;
      } catch (error) {
        console.error('提交表单时出错类型:', error.name);
        console.error('提交表单时出错消息:', error.message);
        console.error('完整错误信息:', error);
        
        // 分类错误并提供更详细的信息
        let enhancedError;
        
        if (error.name === 'TypeError') {
          if (error.message.includes('Failed to fetch')) {
            enhancedError = new Error('无法连接到服务器，请检查：1. 服务器是否正在运行 2. 网络连接是否正常 3. CORS配置是否正确');
            console.error('建议检查：');
            console.error('- 后端服务器是否运行在 http://localhost:3000');
            console.error('- 浏览器网络请求是否显示CORS错误');
            console.error('- 防火墙是否阻止了请求');
          } else {
            enhancedError = new Error(`网络错误: ${error.message}`);
          }
        } else if (error.name === 'SyntaxError') {
          enhancedError = new Error('服务器返回的响应格式无效');
        } else {
          enhancedError = error;
        }
        
        throw enhancedError;
      }
    }
  }  
}
</script>